<template>
  <el-dialog
    :model-value="show"
    title="站点弃用确认"
    width="600px"
    append-to-body
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <el-form
      ref="detailFormRef"
      :model="detailForm"
      :rules="rules"
      label-width="104px"
    >
      <el-form-item label="是否带企业户:" prop="has_business_account">
        <el-radio-group v-model="detailForm.has_business_account">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="弃用备注:" prop="giveup_remark">
        <el-input
          v-model="detailForm.giveup_remark"
          type="textarea"
          resize="none"
          maxlength="100"
          show-word-limit
          :rows="5"
        />
      </el-form-item>
    </el-form>
    <div class="mt-26">
      <div class="danger-text weight-bold">弃用提示：</div>
      <div class="mt-10">
        弃用后，站点将关闭主题或装修且将移除账户登录权限。
      </div>
    </div>
    <template #footer>
      <el-button
        type="primary"
        :loading="submitLoading"
        :disabled="!show"
        @click="submitApply"
      >
        确认弃用
      </el-button>
      <el-button type="info" @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { platformResourceDomainAbandoned } from '@/api/resources';
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  activeRow: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits();

// 关闭
function handleClose() {
  emit('update:show', false);
}

// 提交
const detailForm = ref({ has_business_account: false });
const detailFormRef = ref();
const submitLoading = ref(false);
async function submitApply() {
  try {
    await detailFormRef.value.validate();

    submitLoading.value = true;
    platformResourceDomainAbandoned({
      ...detailForm.value,
      domain_resource_id: props.activeRow.id
    })
      .then(() => {
        $msg.success('弃用成功');
        emit('reload');
        handleClose();
      })
      .finally(() => {
        submitLoading.value = false;
      });
  } catch {
    console.log('站点资源-弃用-表单提交校验未通过');
  }
}

const rules = reactive({});

// 初始化表单
watch(
  () => props.show,
  async val => {
    if (!val) return;
    // 赋默认值
    detailForm.value = { has_business_account: false };
    detailFormRef.value?.clearValidate();
  }
);
</script>

<style lang="scss" scoped></style>
